<template>
	<view class="content">
		<u-sticky>
			<view class="tabsBox">
				<u-tabs :list="list1"  itemStyle="padding: 7px 18px;" lineHeight="1" lineColor="#020202" @click="changeTab" :activeStyle="activeStyle"   :inactiveStyle="inactiveStyle"></u-tabs>
			</view>
		</u-sticky>
		<view class="box" v-if="orderList.length > 0"> 
				<view class="item" v-for="item in orderList" :key="item.id" @click="handleToDetail(item)">
					<view class="top">
						<text class="left">订单编号：{{item.order_id}}</text>
						<text class="right">{{item.status_text}}</text> 
					</view>
					<view class="goodsInfo">
						<view class="sitem">
							<image :src="item.pic" mode=""></image>
							<view class="right">
								<view class="name clamp2">
									{{item.name}}
								</view>
								<view class="cate"> 
									{{getProductAttr(item.sp_data)}}
								</view>
								<view class="sbot">
									<view class="price">
										￥{{item.group_price}}
									</view> 
								</view> 
							</view>
						</view> 
					</view>
					<view class="bot">
						<view class="price">
							共计：<text>￥{{item.group_price}}</text>
						</view>
						<view class="btn" v-if="item.group_status == 1">
							<view class="btn2">邀请拼单</view>
						 </view>
					</view>
				</view>   
			<u-loadmore class="loadmore" :status="status" v-if="page > 1" />
		</view>
		<view class="null" v-else>
			<u-empty text="暂无内容" icon="/static/e.png" marginTop="100" ></u-empty>
		</view>  
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				type:1,
				status: 'loadmore', 
				allData: false,
				pagesize: 10,
				page: 1,
				orderList:[],
				list1: [{
					name: '拼团中',
					value:1
				}, {
					name: '拼团成功',
					value:2
				}, {
					name: '拼团失败',
					value:3
				}],
				activeStyle:{
					color: '#000', 
					fontWeight:"bold"
				},
				inactiveStyle:{
					color: '#666', 
				},
			}
		},
		onLoad(options) { 
		    this.getOrderList()
		},
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.page++
				this.getOrderList() 
			}
		},
		methods: {
			
			getProductAttr(arr){
				return JSON.parse(arr).map(item=>item.value).join('_')
			}, 
			getOrderList(){
				this.$http({
					url:'/pmsGroupDetail/paginQuery',
					method:'get',
					data:{
						groupStatus:this.type,
						pageNum:this.page,
						pageSize:this.pagesize
					}
				}).then(data=>{
					if (this.page == 1) { 
						this.orderList = data.list
					} else {
						this.orderList.push(...data.list)
					} 
					if (data.last_page > data.current_page) {
						this.allData = true
						this.status = 'loading'
					} else {
						this.status = 'nomore' 
					    this.allData = false
					}
				})
			}, 
			handleToDetail(info){
				uni.navigateTo({
					url:`./result?id=${info.order_id}`
				})
			},
			changeTab(e){
				this.type = e.value 
				this.page == 1
				this.getOrderList()
			}, 
		}
	}
</script>

<style>
	page{
		background:#F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.box{
		padding: 30rpx;
		box-sizing: border-box;
		.item{
			background: #fff; 
			margin-bottom: 30rpx;
			padding: 0 24rpx;
			.bot{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				padding: 24rpx;
				padding-top: 0%;
				.text{
					font-size: 28rpx;
					color: #333;
				}
				.price{
					font-size: 24rpx;
					color: #333;
					margin-bottom: 32rpx;
					text{
						font-size: 28rpx;
					}
				}
				.btn{
					margin-left: auto;
					display: flex;
					align-items: center;
					.btn1{
						width: 160rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 50rpx;
						border: 1rpx solid #020202;
						text-align: center;
						line-height: 60rpx;
						font-size: 24rpx;
						color: #020202;
					}
					.btn2{
						width: 160rpx;
						height: 60rpx;
						background: #020202;
						text-align: center;
						color: #fff;
						line-height: 60rpx;
						font-size: 24rpx;
						border: 1px solid #020202;
						border-radius: 50rpx;
						margin-left: 20rpx;
					}
				}
			}
			.goodsInfo{
				padding: 30rpx 0;
				box-sizing: border-box;
				padding-bottom: 0;
				.sitem{
					display: flex; 
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #f2f2f2;
					image{
						width: 180rpx;
						height: 180rpx;
						border-radius: 20rpx;
					}
					.right{
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-left: 30rpx;
						.name{
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
						}
						.cate{
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
						.sbot{
							margin-top: auto;
							display: flex;
							align-items: center;
							.price{
								font-size: 30rpx;
								color: #333333; 
							} 
							.num{
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}
			.top{
				display: flex;
				align-items: center;
				height: 90rpx;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid #f2f2f2;
				.left{
					font-size: 24rpx;
					color: #333333;
				}
				.right{
					font-size: 24rpx;
					color: #020202;
				}
			}
		}
	}
	.tabsBox{
		display: flex;
		background: #f8f8f8;
		justify-content: center;
	}
</style>
